<template>
  <!-- 账号绑定 -->
  <view class="header">
    <u-toast ref="uToast" />
    <u-navbar :border-bottom="false" title="账号绑定" title-size="32" title-width="500"></u-navbar>
    <view class="boxs">
      <view class="borders flex flex-jc-sb">
        <view class="flex">
          <view class="">
            <i-icon icon="iconweixin" type="single" size="40rpx" color="#09bb07" @click.native="closcpbtn()"></i-icon>
          </view>
          <view class="ml-15">
            微信
          </view>
        </view>
        <view class="color-FBB000 font-28" v-if="!bindWeChatAccount" @click="weixinClick()">
          立即绑定
        </view>
        <view class="color-999 font-28" v-else>
          已绑定
        </view>
      </view>
      <view class="borders flex flex-jc-sb">
        <view class="flex">
          <view class="">
            <i-icon icon="iconqq" type="single" size="40rpx" color="#18b6ed" @click.native="closcpbtn()"></i-icon>
          </view>
          <view class="ml-15">
            腾讯QQ
          </view>
        </view>
        <view class="color-FBB000 font-28" v-if="!bindQQAccount">
          立即绑定
        </view>
        <view class="color-999 font-28" v-else>
          已绑定
        </view>
      </view>
      <view class="borders flex flex-jc-sb">
        <view class="flex">
          <view class="">
            <i-icon icon="iconzhifubao" type="single" size="40rpx" color="#118ee9" @click.native="closcpbtn()"></i-icon>
          </view>
          <view class="ml-15">
            支付宝
          </view>
        </view>
        <view class="color-FBB000 font-28" v-if="!bindAlipayAccount">
          立即绑定
        </view>
        <view class="color-999 font-28" v-else>
          已绑定
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bindAlipayAccount: false,
        bindQQAccount: false,
        bindWeChatAccount: false
      }
    },
    created() {
      this.GetThirdPartyAccountState()
    },
    methods: {
      //当前账号的第三方账户的绑定
      async GetThirdPartyAccountState() {
        try {
          const res = await this.$api.system.GetThirdPartyAccountState({})
          this.bindAlipayAccount = res.data.bindAlipayAccount
          this.bindQQAccount = res.data.bindQQAccount
          this.bindWeChatAccount = res.data.bindWeChatAccount
        } catch (err) {}
      },
      weixinClick() {
        this.weixin()
      },
      //微信登录token用户信息
      async BindWeChatAccount(type) {
        console.log('111', type.authResult.openid)
        console.log('222', type.authResult.access_token)
        try {
          const res = await this.$api.system.BindWeChatAccount({
            token: type.authResult.access_token,
            openId: type.authResult.openid
          })
          console.log('1214', res)
          if (res.data) {
            this.$refs.uToast.show({
              title: '绑定成功',
              type: 'success'
            })
            this.GetThirdPartyAccountState()
          } else {
            this.$refs.uToast.show({
              title: '此微信已经被绑定了',
              type: 'warning'
            })
          }
        } catch (e) {}
      },
      weixin() {
        // 第一授权获取用户信息 ===》按钮触发
        let _self = this
        // 1.获取用户的信息
        uni.login({
          provider: 'weixin',
          success: infoRes => {
            console.log(123, infoRes)
            // 2.后台接收接口
            this.BindWeChatAccount(infoRes)
          },
          fail: e => {
            console.log(e)
            uni.showToast({
              title: '获取失败' + e,
              icon: 'none'
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    background: #F6F6F6;
    height: 100vh;
    padding: 25rpx;

    .boxs {
      background: #FFFFFF;
      box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
      border-radius: 10rpx;
      padding: 0rpx 24rpx;

      .borders {
        padding: 24rpx 0rpx;
        border-bottom: 1px solid #EEEEEE;
      }
    }
  }
</style>
